<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
import countApi from '@/api/count'

export default {
  data() {
    return {
      charts: '',
      opinionData: [
        {value: 666, name: 'a'},
        {value: 274, name: 'b'},
        {value: 310, name: 'c'},
        {value: 335, name: 'd'}
      ]
    }
  },
  created() {

    countApi.selectCount().then(response => {
      this.opinionData = response.data
      console.log("返回数据", this.opinionData)
      for (let i = 0; i < this.opinionData.length; i++) {
        this.opinionData[i].name = this.opinionData[i].name + ":" + this.opinionData[i].value
      }
      console.log("最后生命周期")
      this.$nextTick(function () {
        this.drawLine('main')
      })
    })

  },
  methods: {
    drawLine(id) {
      this.charts = this.$echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        // legend: { //图表标题
        //   data: ['安全温度图','a']
        // },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },

        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        // xAxis: {
        //   type: 'category',
        //   boundaryGap: false,
        //   data: ["1", "2", "3", "4", "5",]
        //
        // },
        // yAxis: {
        //   type: 'value'
        // },

        series: [{
          // name: 'a',
          type: 'pie',
          stack: '总量',
          data: this.opinionData
        }]
      })
    }
  },
  //调用
  mounted() {

  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
